import styled from 'styled-components'
import search from 'assets/images/search.png'
import Border1px from '../style/Border1px'


const SearchContainer = styled.div`

  height:1.3rem;
  background:${(props)=>props.bg};
  padding:0 0.3rem;
  display:flex;
  justify-content:center;
  align-items:center;

`

const InputContainer = styled.div`
  display:flex;
  justify-content:center;
  align-items:center;
  flex:1;
  height:0.8rem;
  /* border:solid 0.01rem orange; */
  border-radius:${(props)=>props.radius}rem;
  padding:0 0.1rem;
  background:${(props)=>props.inputBg};
  i{
    width:.3rem;
    height:.3rem;
    background:url(${search});
    background-size:cover;
  }

  input{
    height:100%;
    width:4rem;
    border:none;
    background:${(props)=>props.inputBg};
    &::placeholder{
    color:#666666;
    
  }
  }
  

`

const InputBorderContaner = Border1px(InputContainer);


export {
  SearchContainer,
  InputContainer,
  InputBorderContaner
}